import React, { useState } from 'react';
import axios, { AxiosResponse } from "axios";

export default function Register() {
  const [password, setPassword] = useState("")
  const [login, setLogin] = useState("")
  const loginHandler = (e)=>{
    setLogin(e.target.value)
  }

  const passwordHandler = (e)=>{
    setPassword(e.target.value)
  }

  const click = ()=>{
    axios({
      method: 'post',
      url: '/api/auth/register',
      data: {
        login: login,
        password: password
      }
    }).then(function (response) {
      console.log(response)
      window.location.replace("/login")
      
    }).catch(error => {
      alert(error.response.data.detail)
   })};
  
    return (
      <body>
      <div class="center">
        <h1>Register</h1>
        <form>
          <div class="email">
            <input class="form-control" onChange={e=>loginHandler(e)} value={login} type="email" placeholder="E-mail" aria-label="default input example" name="email" id="email"  required/>
            <span></span>
          </div>
          <div class="txt_field">
            <input type="password" onChange={e=>passwordHandler(e)} value={password} class="form-control" placeholder="Enter password" aria-label="default input example" name="email" id="password" required/>
            <span></span>
          </div>
          <div class="pass"> </div>
          <input type="submit" onClick={()=>click()} id="button" value="Register"/>
          <div class="signup_link">
          </div>
          <div class="signup_link">
            Already have an account? <a href="/login">Sign in</a>
          </div>
        </form>
      </div>
    </body>
    );
  }